﻿@model List<Models.Area>
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <environment include="Development">
        <link rel="stylesheet" href="~/layer/css/layui.css" media="all" />
        <link rel="stylesheet" href="~/layer/css/admin.css" media="all" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="~/layer/css/layui.css" asp-append-version="true" media="all" />
        <link rel="stylesheet" href="~/layer/css/admin.css" asp-append-version="true" media="all" />
    </environment>
</head>
<body id="iosiframe">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">角色管理</div>

                    <div class="layui-card-body">

                        <div style="padding-bottom: 10px;">
                            <button class="layui-btn layuiadmin-btn-admin" data-type="batchdel">删除</button>
                            <button class="layui-btn layuiadmin-btn-admin" data-type="add">添加</button>
                        </div>


                        <table class="layui-hide" id="table-page" lay-filter="table"></table>

                        <script type="text/html" id="buttonTpl">
                            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                        </script>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-fluid" id="cash" style="display:none;">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-form" action="" lay-filter="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">角色</label>
                                <div class="layui-input-inline"><input type="text" maxlength="100" id="Text" name="Text" placeholder="" lay-verify="" class="layui-input"></div>
                            </div>

                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <label class="layui-form-label"></label>
                                    <div class="layui-input-block">
                                        <input type="checkbox" name="all" lay-skin="primary" lay-filter="all" value="" title="全选">
                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-lg12">
                                    <label class="layui-form-label">权限范围</label>
                                    <div class="layui-input-block">
                                        @if (Model != null && Model.Count > 0) {
                                            foreach (var m in Model) {
                                                <input type="checkbox" name="ModuleIds" lay-skin="primary" value="@m.id" title="@m.name">
                                            }
                                        }
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="~/layer/layui.js"></script>
    <script>
        layui.config({
            base: '../../layer/' //静态资源所在路径
        }).extend({
            index: 'index' //主入口模块
            }).use(['form', 'index', 'table'], function () {
                var $ = layui.$
                    , form = layui.form
                    , table = layui.table;

                var ua = navigator.userAgent.toLowerCase();
                var screenwidth = window.screen.width;
                if (!/iphone|ipad|ipod/.test(ua)) {
                    $("#iosiframe").attr("scrolling", "auto");
                } else {
                    $('#iosiframe').width(screenwidth + 'px');
                }

                $.ajax({
                    url: '@Url.Action("getrolelistcolumns", "api")',
                    dataType: 'json',
                    contentType: 'application/json',
                    type: 'get'
                }).fail(function (jqXHR, textStatus, errorThrown) {
                    window.parent.tools.alert(errorThrown, { icon: 2, title: textStatus });
                }).done(function (res) {
                    res.splice(0, 0, { type: 'checkbox' });
                    res.push({ width: 130, align: 'center', toolbar: '#buttonTpl' });

                    var tableIns = table.render({
                        elem: '#table-page'
                        , cellMinWidth: 80
                        , limit: 30
                        , url: '@Url.Action("rolelist","api")'
                        , toolbar: true
                        , defaultToolbar: ['filter', 'print', 'exports']
                        , cols: [res]
                        , parseData: function (res) {
                            return {
                                code: 0,
                                msg: "",
                                count: res.count,
                                data: JSON.parse(res.data)
                            }
                        }
                        , page: true
                    });

                    form.on('submit(LAY-user-back-search)', function (data) {
                        var field = data.field;

                        //执行重载
                        tableIns.reload({
                            where: field
                        });
                    });

                    var del = function (ids, table) {
                        $.ajax({
                            url: '@Url.Action("delrole", "api")'
                            , dataType: 'json'
                            , data: { ids: ids }
                            , contentType: 'application/json'
                            , type: 'get'
                        }).fail(function (jqXHR, textStatus, errorThrown) {
                            window.parent.tools.alert(errorThrown, { icon: 2, title: textStatus });
                        }).done(function (res) {
                            layer.msg(res.message, { offset: '15px', icon: (res.code == 0 ? 1 : 2), time: 2000 }, function () {

                                if (res.code == 0) {
                                    table.reload();
                                }
                            });
                        });
                    }

                    var active = {
                        batchdel: function () {
                            var checkStatus = table.checkStatus('table-page')
                                , checkData = checkStatus.data;

                            if (checkData.length === 0) {
                                return layer.msg('请选择数据');
                            }

                            layer.confirm('确定删除吗？', function () {
                                var ids = [];

                                checkData.forEach(function (item) { ids.push(item.Id) });

                                del(ids.join(','), tableIns);
                            });
                        }
                        , add: function () {
                            editRole(0, tableIns);
                        }
                    }

                    var editRole = function (id,table) {
                        var layerIndex = layer.open({
                            type: 1,
                            title: '编辑角色',
                            close: false,
                            shade: 0.8,
                            area: ['420px'],
                            content: $('#cash'),
                            btn: ['确定', '取消'],
                            btnAlign: 'r',
                            end: function () {
                                $('#Text').val('');
                                $('input[type="checkbox"]:checked').each(function () {
                                    this.click();
                                });
                                form.render('checkbox');
                            },
                            yes: function () {
                                var ids = [],
                                    text = $('#Text').val();

                                if (text.length == 0) {
                                    layer.msg("请填写角色名");
                                    return;
                                }

                                $('input[name="ModuleIds"]:checked').each(function () {
                                    ids.push(this.value);
                                });

                                var moduleIds = ids.join(',');

                                $.ajax({
                                    url: '@Url.Action("SaveRole", "api")'
                                    , dataType: 'json'
                                    , data: { Id: id, Text: text, ModuleIds: moduleIds }
                                    , type: 'post'
                                }).fail(function (jqXHR, textStatus, errorThrown) {
                                    alert(errorThrown, { icon: 2, title: textStatus });
                                }).done(function (res) {
                                    layer.msg(res.message, { offset: '15px', icon: (res.code == 0 ? 1 : 2), time: 3000 }, function () {
                                        if (res.code == 0) {
                                            table.reload();
                                            layer.close(layerIndex);
                                        }

                                    });
                                });
                            }
                        });
                    }

                    $('.layui-btn.layuiadmin-btn-admin').on('click', function () {
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });

                    table.on('tool(table)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
                        var data = obj.data; //获得当前行数据
                        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                        var tr = obj.tr; //获得当前行 tr 的DOM对象

                        if (layEvent === 'del') { //删除
                            layer.confirm('确定删除吗？', function (index) {
                                del(obj.data.Id, tableIns);
                            });
                        } else if (layEvent === 'edit') { //编辑
                            var ids = obj.data.ModuleIds.split(',');


                            for (var i in ids) {
                                $('input[value="' + ids[i] + '"]').click();
                            }

                            form.render('checkbox');

                            $('#Text').val(obj.data.Text);


                            editRole(obj.data.Id, tableIns);
                        }
                    });

                    form.on('checkbox(all)', function (obj) {
                        var checked = obj.elem.checked;

                        if (checked) {
                            $('input[name="ModuleIds"]:not(:checked)').click();
                        } else {
                            $('input[name="ModuleIds"]:checked').click();
                        }

                        form.render('checkbox');
                    });
                });

            });


    </script>
</body>
</html>
